<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>多种筛选结构 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 20px;
    }
    
    .container {
      padding-top: 20px;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin: 25px 0 15px;
      color: #333;
      padding-bottom: 8px;
      border-bottom: 1px solid #eee;
    }
    
    .filter-section {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    /* 标签式筛选 */
    .tag-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .tag-item {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .tag-item.active {
      background-color: #0d6efd;
      color: white;
    }
    
    .tag-item:not(.active) {
      background-color: #f0f0f0;
      color: #333;
    }
    
    /* 下拉式筛选 */
    .dropdown-filter .row {
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .custom-select-wrapper {
      position: relative;
      flex: 1;
    }
    
    .custom-select {
      width: 100%;
      padding: 8px 35px 8px 15px;
      border-radius: 8px;
      border: 1px solid #ddd;
      background-color: white;
      appearance: none;
      font-size: 14px;
      cursor: pointer;
    }
    
    .select-arrow {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      pointer-events: none;
    }
    
    /* 开关式筛选 */
    .toggle-filter .form-check {
      margin-bottom: 12px;
    }
    
    .form-check-label {
      font-size: 14px;
      color: #333;
    }
    
    .form-switch .form-check-input {
      height: 20px;
      width: 40px;
    }
    
    /* 滑块式筛选 */
    .slider-filter {
      padding: 10px 0;
    }
    
    .slider-label {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .range-slider {
      width: 100%;
      height: 6px;
      -webkit-appearance: none;
      appearance: none;
      background: #e0e0e0;
      border-radius: 3px;
      outline: none;
    }
    
    .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0d6efd;
      cursor: pointer;
      transition: all 0.15s;
    }
    
    .range-slider::-webkit-slider-thumb:hover {
      transform: scale(1.1);
    }
    
    /* 复选框筛选 */
    .checkbox-filter .form-check {
      margin-bottom: 10px;
    }
    
    .checkbox-group {
      max-height: 200px;
      overflow-y: auto;
      padding-right: 5px;
    }
    
    /* 日期筛选 */
    .date-filter .input-group {
      margin-bottom: 15px;
    }
    
    .date-input {
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid #ddd;
    }
    
    /* 搜索筛选 */
    .search-filter {
      position: relative;
      margin-bottom: 15px;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #ddd;
      font-size: 14px;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 按钮组筛选 */
    .btn-group-filter .btn-group {
      width: 100%;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-btn {
      flex: 1;
      min-width: 80px;
      padding: 6px 12px;
      font-size: 13px;
      border-radius: 8px;
    }
    
    /* 操作按钮 */
    .filter-actions {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }
    
    .filter-btn {
      flex: 1;
      padding: 8px 0;
      font-size: 14px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h3 class="mb-4">多种筛选结构展示</h3>
    
    <!-- 1. 标签式筛选 -->
    <div class="filter-section">
      <h4 class="section-title">1. 标签式筛选</h4>
      <p class="text-sm text-secondary mb-3">适用于热门分类、状态等快速筛选</p>
      
      <div class="tag-filter">
        <div class="tag-item active">全部内容</div>
        <div class="tag-item">热门推荐</div>
        <div class="tag-item">最新发布</div>
        <div class="tag-item">精华内容</div>
        <div class="tag-item">已关注</div>
        <div class="tag-item">附近动态</div>
        <div class="tag-item">话题讨论</div>
        <div class="tag-item">活动通知</div>
      </div>
      
      <div class="filter-actions">
        <button class="btn btn-primary filter-btn">应用筛选</button>
        <button class="btn btn-outline-secondary filter-btn">重置</button>
      </div>
    </div>
    
    <!-- 2. 下拉式筛选 -->
    <div class="filter-section">
      <h4 class="section-title">2. 下拉式筛选</h4>
      <p class="text-sm text-secondary mb-3">适用于多维度组合筛选</p>
      
      <div class="dropdown-filter">
        <div class="row">
          <div class="custom-select-wrapper">
            <select class="custom-select">
              <option value="">内容类型</option>
              <option value="article">文章</option>
              <option value="video">视频</option>
              <option value="image">图片</option>
              <option value="audio">音频</option>
            </select>
            <i class="fa fa-chevron-down select-arrow"></i>
          </div>
          
          <div class="custom-select-wrapper">
            <select class="custom-select">
              <option value="">分类</option>
              <option value="tech">科技</option>
              <option value="life">生活</option>
              <option value="entertainment">娱乐</option>
              <option value="education">教育</option>
            </select>
            <i class="fa fa-chevron-down select-arrow"></i>
          </div>
        </div>
        
        <div class="row">
          <div class="custom-select-wrapper">
            <select class="custom-select">
              <option value="">排序方式</option>
              <option value="hot">热度优先</option>
              <option value="new">最新发布</option>
              <option value="comment">评论最多</option>
              <option value="like">点赞最多</option>
            </select>
            <i class="fa fa-chevron-down select-arrow"></i>
          </div>
          
          <div class="custom-select-wrapper">
            <select class="custom-select">
              <option value="">时间范围</option>
              <option value="day">今天</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
              <option value="year">今年</option>
            </select>
            <i class="fa fa-chevron-down select-arrow"></i>
          </div>
        </div>
      </div>
      
      <div class="filter-actions">
        <button class="btn btn-primary filter-btn">应用筛选</button>
        <button class="btn btn-outline-secondary filter-btn">重置</button>
      </div>
    </div>
    
    <!-- 3. 开关式筛选 -->
    <div class="filter-section">
      <h4 class="section-title">3. 开关式筛选</h4>
      <p class="text-sm text-secondary mb-3">适用于简单的开启/关闭筛选条件</p>
      
      <div class="toggle-filter">
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="toggle1" checked>
          <label class="form-check-label" for="toggle1">仅显示关注内容</label>
        </div>
        
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="toggle2">
          <label class="form-check-label" for="toggle2">包含敏感内容</label>
        </div>
        
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="toggle3">
          <label class="form-check-label" for="toggle3">仅Wi-Fi下加载图片</label>
        </div>
        
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="toggle4" checked>
          <label class="form-check-label" for="toggle4">显示热门评论</label>
        </div>
        
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="toggle5">
          <label class="form-check-label" for="toggle5">屏蔽广告内容</label>
        </div>
      </div>
      
      <div class="filter-actions">
        <button class="btn btn-primary filter-btn">保存设置</button>
      </div>
    </div>
    
    <!-- 4. 滑块式筛选 -->
    <div class="filter-section">
      <h4 class="section-title">4. 滑块式筛选</h4>
      <p class="text-sm text-secondary mb-3">适用于价格、数量、评分等范围筛选</p>
      
      <div class="slider-filter">
        <div class="mb-4">
          <div class="slider-label">
            <span>价格范围</span>
            <span id="priceValue">¥0 - ¥5000</span>
          </div>
          <input type="range" min="0" max="5000" value="5000" class="range-slider" id="priceSlider">
        </div>
        
        <div class="mb-4">
          <div class="slider-label">
            <span>成员数量</span>
            <span id="memberValue">0 - 5000人</span>
          </div>
          <input type="range" min="0" max="5000" value="5000" class="range-slider" id="memberSlider">
        </div>
        
        <div>
          <div class="slider-label">
            <span>评分最低</span>
            <span id="ratingValue">3.5分</span>
          </div>
          <input type="range" min="0" max="5" step="0.5" value="3.5" class="range-slider" id="ratingSlider">
        </div>
      </div>
      
      <div class="filter-actions">
        <button class="btn btn-primary filter-btn">应用筛选</button>
        <button class="btn btn-outline-secondary filter-btn">重置</button>
      </div>
    </div>
    
    <!-- 5. 复选框筛选 -->
    <div class="filter-section">
      <h4 class="section-title">5. 复选框筛选</h4>
      <p class="text-sm text-secondary mb-3">适用于多选项并行筛选</p>
      
      <div class="checkbox-filter">
        <p class="text-sm fw-medium mb-2">兴趣标签</p>
        <div class="checkbox-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check1" checked>
            <label class="form-check-label" for="check1">科技</label>
          </div>
          
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check2" checked>
            <label class="form-check-label" for="check2">音乐</label>
          </div>
          
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check3">
            <label class="form-check-label" for="check3">体育</label>
          </div>
          
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check4">
            <label class="form-check-label" for="check4">美食</label>
          </div>
          
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check5">
            <label class="form-check-label" for="check5">旅行</label>
          </div>
          
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check6">
            <label class="form-check-label" for="check6">摄影</label>
          </div>
          
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check7">
            <label class="form-check-label" for="check7">游戏</label>
          </div>
        </div>
      </div>
      
      <div class="filter-actions">
        <button class="btn btn-primary filter-btn">应用筛选</button>
        <button class="btn btn-outline-secondary filter-btn">全选/取消</button>
      </div>
    </div>
    
    <!-- 6. 日期筛选 -->
    <div class="filter-section">
      <h4 class="section-title">6. 日期筛选</h4>
      <p class="text-sm text-secondary mb-3">适用于按时间范围筛选内容</p>
      
      <div class="date-filter">
        <div class="input-group">
          <input type="date" class="form-control date-input">
          <span class="input-group-text px-3">至</span>
          <input type="date" class="form-control date-input">
        </div>
        
        <div class="tag-filter">
          <div class="tag-item">今天</div>
          <div class="tag-item active">本周</div>
          <div class="tag-item">本月</div>
          <div class="tag-item">上月</div>
          <div class="tag-item">今年</div>
          <div class="tag-item">自定义</div>
        </div>
      </div>
      
      <div class="filter-actions">
        <button class="btn btn-primary filter-btn">应用筛选</button>
        <button class="btn btn-outline-secondary filter-btn">重置</button>
      </div>
    </div>
    
    <!-- 7. 搜索筛选 -->
    <div class="filter-section">
      <h4 class="section-title">7. 搜索筛选</h4>
      <p class="text-sm text-secondary mb-3">适用于关键词精确筛选</p>
      
      <div class="search-filter">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索内容、用户或标签...">
      </div>
      
      <div class="mb-3">
        <p class="text-sm fw-medium mb-2">热门搜索</p>
        <div class="tag-filter">
          <div class="tag-item">前端开发</div>
          <div class="tag-item">旅行攻略</div>
          <div class="tag-item">美食推荐</div>
          <div class="tag-item">电影评论</div>
          <div class="tag-item">健身技巧</div>
        </div>
      </div>
      
      <div class="filter-actions">
        <button class="btn btn-primary filter-btn">搜索</button>
        <button class="btn btn-outline-secondary filter-btn">清除</button>
      </div>
    </div>
    
    <!-- 8. 按钮组筛选 -->
    <div class="filter-section">
      <h4 class="section-title">8. 按钮组筛选</h4>
      <p class="text-sm text-secondary mb-3">适用于重要筛选条件的突出展示</p>
      
      <div class="btn-group-filter">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-outline-primary filter-btn active">全部</button>
          <button type="button" class="btn btn-outline-primary filter-btn">好友</button>
          <button type="button" class="btn btn-outline-primary filter-btn">关注</button>
          <button type="button" class="btn btn-outline-primary filter-btn">陌生人</button>
        </div>
        
        <div class="btn-group mt-2" role="group">
          <button type="button" class="btn btn-outline-secondary filter-btn">最近联系</button>
          <button type="button" class="btn btn-outline-secondary filter-btn">按字母</button>
          <button type="button" class="btn btn-outline-secondary filter-btn">按地区</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 标签式筛选切换
    document.querySelectorAll('.tag-item').forEach(item => {
      item.addEventListener('click', function() {
        // 检查是否是单选组（有active类的组）
        if(this.parentElement.querySelector('.tag-item.active')) {
          this.parentElement.querySelectorAll('.tag-item').forEach(i => {
            i.classList.remove('active');
          });
        }
        this.classList.add('active');
      });
    });
    
    // 滑块筛选值更新
    const priceSlider = document.getElementById('priceSlider');
    const memberSlider = document.getElementById('memberSlider');
    const ratingSlider = document.getElementById('ratingSlider');
    
    priceSlider.addEventListener('input', function() {
      document.getElementById('priceValue').textContent = `¥0 - ¥${this.value}`;
    });
    
    memberSlider.addEventListener('input', function() {
      document.getElementById('memberValue').textContent = `0 - ${this.value}人`;
    });
    
    ratingSlider.addEventListener('input', function() {
      document.getElementById('ratingValue').textContent = `${this.value}分`;
    });
    
    // 按钮组筛选切换
    document.querySelectorAll('.filter-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if(this.classList.contains('active')) return;
        
        // 找到同组的其他按钮
        const siblings = this.parentElement.querySelectorAll('.filter-btn');
        siblings.forEach(s => s.classList.remove('active'));
        
        this.classList.add('active');
      });
    });
    
    // 重置按钮功能
    document.querySelectorAll('.filter-actions .btn-outline-secondary').forEach(btn => {
      btn.addEventListener('click', function() {
        const filterSection = this.closest('.filter-section');
        
        // 重置标签筛选
        filterSection.querySelectorAll('.tag-item').forEach((item, index) => {
          item.classList.toggle('active', index === 0);
        });
        
        // 重置下拉筛选
        filterSection.querySelectorAll('.custom-select').forEach(select => {
          select.selectedIndex = 0;
        });
        
        // 重置开关筛选
        filterSection.querySelectorAll('.form-check-input').forEach((input, index) => {
          input.checked = index === 0 || index === 3; // 默认选中第一个和第四个
        });
        
        // 重置滑块筛选
        const priceSlider = filterSection.querySelector('#priceSlider');
        if(priceSlider) {
          priceSlider.value = 5000;
          document.getElementById('priceValue').textContent = `¥0 - ¥5000`;
        }
        
        const memberSlider = filterSection.querySelector('#memberSlider');
        if(memberSlider) {
          memberSlider.value = 5000;
          document.getElementById('memberValue').textContent = `0 - 5000人`;
        }
        
        const ratingSlider = filterSection.querySelector('#ratingSlider');
        if(ratingSlider) {
          ratingSlider.value = 3.5;
          document.getElementById('ratingValue').textContent = `3.5分`;
        }
        
        // 重置复选框筛选
        filterSection.querySelectorAll('.checkbox-group .form-check-input').forEach(input => {
          input.checked = false;
        });
        
        // 重置搜索框
        const searchInput = filterSection.querySelector('.search-input');
        if(searchInput) {
          searchInput.value = '';
        }
        
        // 重置按钮组
        filterSection.querySelectorAll('.btn-group .filter-btn').forEach((btn, index) => {
          btn.classList.toggle('active', index === 0);
        });
      });
    });
  </script>
</body>
</html>
